<template>
	<view class="tabber">
		<view class="item" v-for="item in iconList" :key="item.iconKey" @click="changeActivePage(item.iconKey)">
			<view class="imageBox">
				<image :src="activePage===item.iconKey?item.iconActive:item.icon"></image>
			</view>

			<view class="menuName"  :style="{color:activePage===item.iconKey?'#2E55EF':'#999'}">{{item.menuName}}</view>
		</view>

	</view>
</template>

<script lang="ts" setup>
import {
  iconList,
} from './data';
import { onMounted } from 'vue';

defineProps({
  activePage: { type: String, default: 'home' },
});
const emit = defineEmits(['change']);

const changeActivePage = (key: string) => {
  emit('change', key);
};
onMounted(() => {
	 emit('change', 'home');
});
</script>

<style lang="less" scoped>
	.tabber {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 135rpx;
		display: flex;

		.item {
			flex: 1;
			display: flex;
			flex-wrap: wrap;

			.imageBox {
				width: 100%;
				display: flex;
				justify-content: center;
				align-items: center;

				image {
					width: 48rpx;
					height: 48rpx;
				}
			}

			.menuName {
				width: 100%;
				font-size: 28rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #2E55EF;
				line-height: 0px;
				text-align: center;
			}
		}
	}
</style>
